<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" id="demo_autoScroll">
<head>
<meta charset="UTF-8">
<title>聊天窗口</title>
<link rel="stylesheet" type="text/css" href="/css/aui.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var url = "ws://localhost:8080/ChatHandler/";
		//var url = "ws://192.168.40.210:8080/ChatHandler/";
		var ws = null;	//websocket对象
		
			/* 获取历史记录  */
			getHistoryMessages();
			
			//加入聊天室
			//$("#join").click(function(){
			//var currentSname = $("#uname").val();
			//获取当前加入聊天室人的名字
			var currentSname = $("#currentSname").val();
			
			//创建websocket对象，连接服务器
			ws = new WebSocket(url+currentSname);
			
			//给ws对象绑定事件
			ws.onopen = function(){
				console.info("连接服务器成功");
			}
			//接收消息：将消息添加到消息框
			ws.onmessage = function(result){
				var chatdiv = "";
				var mess = result.data.split(" ");  
				//当前用户在右,聊天对象在左
				if(mess[0]==currentSname){
					chatdiv = '<div class="aui-chat-item aui-chat-right">'
	        			+'<div class="aui-chat-media">'
          	  			+'头像'
        				+'</div>'
        				+'<div class="aui-chat-inner">'
            			+'<div class="aui-chat-name">'+currentSname+'</div>'
            			+'<div class="aui-chat-content" style="background-color: #96cbff;">'
                		+'<div class="aui-chat-arrow" style="background-image: linear-gradient(45deg, #96cbff, #96cbff 50%, transparent 50%);"></div>'
            			+mess[1]
            			+'</div>'
        				+'</div>'
    					+'</div>';
				}else{
					chatdiv = '<div class="aui-chat-item aui-chat-left">'
	        			+'<div class="aui-chat-media">'
          	  			+'头像'
        				+'</div>'
        				+'<div class="aui-chat-inner">'
            			+'<div class="aui-chat-name">'+$("#talkerCname").val()+'</div>'
            			+'<div class="aui-chat-content" style="background-color: #fff;">'
                		+'<div class="aui-chat-arrow" style="background-image: linear-gradient(45deg, #fff, #fff 50%, transparent 50%);"></div>'
            			+mess[1]
            			+'</div>'
        				+'</div>'
    					+'</div>';
				}
				//自动滚动到底部
				var textarea = document.getElementById("demo_autoScroll");
				textarea.scrollTop = textarea.scrollHeight;
				
				$("#chatdiv").append(chatdiv);
			}
			//关闭连接
			ws.onclose = function(){
				var leaveChat = '<div class="aui-chat-header">'+currentSname+'离开聊天室</div>';
				$("#chatdiv").append(leaveChat);
				console.info("断开连接");
			}
			//});
		
		//发送消息
		$("#send").click(function(){
			//获取输入框的val
			var content = $("#content").val();
			//发送
			if(ws!=null){
				if (content == ""||content.replace(/(^\s*)|(\s*$)/g, "")=="") {
					alert("内容不能为空");
				}else{
					ws.send(content);
					$("#content").val(""); //清除输入框的内容
				}				
			}		
				//保存当前用户发的聊天记录
		    	var options = {
		    			url: "/message/saveChatRecord",
		    			method: 'post',
		    			data:{
		    				"content":content,
		    				"currentUid":$("#currentUid").val(),
		    				"talkerUid":$("#talkerUid").val()
					    },
					    success: function (data) {  
					    	console.info("success!");
					    }
		    	};
		    	$.ajax(options);				    	
		});
		//离开聊天室
		$("#leave").click(function(){
			if(ws!=null){
				ws.close();
			}
		});
	});
	//获取历史消息
	function getHistoryMessages(){
		var currentUid = $("#currentUid").val();
		var options = {
    			url: "/message/getHistoryMessages",
    			method: 'post',
    			data:{
    				"currentUid":currentUid,
    				"talkerUid":$("#talkerUid").val()
			    },
			    success: function (data) {
			    	console.info(data);
			    	var mes = "";
			    	for(var i=0;i<data.length;i++){
			    		if(data[i].uid==currentUid){
				    		mes+='<div class="aui-chat-item aui-chat-right">'
			        			+'<div class="aui-chat-media">'
		          	  			+'头像'
		        				+'</div>'
		        				+'<div class="aui-chat-inner">'
		            			+'<div class="aui-chat-name">'+$("#currentSname").val()+'</div>'
		            			+'<div class="aui-chat-content" style="background-color: #96cbff;">'
		                		+'<div class="aui-chat-arrow" style="background-image: linear-gradient(45deg, #96cbff, #96cbff 50%, transparent 50%);"></div>'
		            			+data[i].content
		            			+'</div>'
		        				+'</div>'
		    					+'</div>';
			    		}else{
			    			mes+='<div class="aui-chat-item aui-chat-left">'
			        			+'<div class="aui-chat-media">'
		          	  			+'头像'
		        				+'</div>'
		        				+'<div class="aui-chat-inner">'
		            			+'<div class="aui-chat-name">'+$("#talkerCname").val()+'</div>'
		            			+'<div class="aui-chat-content" style="background-color: #fff;">'
		                		+'<div class="aui-chat-arrow" style="background-image: linear-gradient(45deg, #fff, #fff 50%, transparent 50%);"></div>'
		            			+data[i].content
		            			+'</div>'
		        				+'</div>'
		    					+'</div>';
			    		}
			    		
			    	}
			    	mes+="<div class='aui-chat-header'>以上是历史记录</div>";
			    	$("#message").append(mes+"\n");
			    }
    	};
    	$.ajax(options);
	}
</script>
</head>
<body>
	<div class="chatbox" id="chatcontent">
		<section class="aui-chat" id="chatdiv">
		    <div class="aui-chat-header">你好,<label th:text="${currentSname}"></label></div>
		    
		    <div id="message"><!-- 历史记录 --></div>
		    
		    <div class="aui-chat-item aui-chat-left">
		        <div class="aui-chat-media">
		             	头像
		        </div>
		        <div class="aui-chat-inner">
		            <div class="aui-chat-name"><label th:text="${talkerCname}"></label></div>
		            <div class="aui-chat-content" style="background-color: #fff;">
		                <div class="aui-chat-arrow" style="background-image: linear-gradient(45deg, #fff, #fff 50%, transparent 50%);"></div>
		                	你好
		            </div>
		        </div>
		    </div>
	    </section>
	</div>
	
	<!-- 测试用 -->
	<!-- <div class="test1">
		用户名:<input type="text" id="uname">
			<button id="join">加入聊天室</button>
	</div> -->
	
	<div class="senddiv">
		<input type="hidden" id="currentUid" th:value="${currentUid}">
		<input type="hidden" id="currentSname" th:value="${currentSname}">
		<input type="hidden" id="talkerUid" th:value="${talkerUid}">
		<input type="hidden" id="talkerCname" th:value="${talkerCname}">
		
		<input type="text" id="content" style="box-shadow: 0px -1px 20px 4px rgba(2, 2, 2, 0.08);">		
		<button id="send" style="box-shadow: 0px 2px 10px 0px rgba(2, 2, 2, 0.12);">发送</button>	
		
		<!-- 返回上一级 -->
		<a href="#" onClick="javascript :history.back(-1);">
			<button id="leave" style="box-shadow: 0px 2px 10px 0px rgba(2, 2, 2, 0.12);">离开</button>
		</a>
		
		<!-- 回到主页 -->
	<!--<a th:href="@{/home.jsp}">
			<button id="leave">离开</button>
		</a> -->
	</div>
</body>
</html>